<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text ']">
		<tm-menubars color="white" title="首页" :shadow="0"></tm-menubars>
		<view class="content">
			<view class="ma-20  flex-center">
				<tm-swiper
					:round="6"
					margin="20"
					height="300"
					width="750"
					inline
					:autoplay="true"
					dot-model="rect"
					:circular="true"
					dot-direction="center"
					:indicator-dots="true"
					:list="list"
				></tm-swiper>
			</view>
			<view class="ma-10"><tm-grid :grid="4" @change="change" color="blue" :list="list2" :border="false"></tm-grid></view>

			<!-- <tm-alerts :margin="[30, 0]" color="green" :label="['纵向这是二条静态消息提醒', '纵向这是二条的消息轮播动态']"></tm-alerts> -->
			
			<!-- 通知 -->
			<view class="inform">
				<view class="inform-info shadow-1">
					<view class="picture">
						<image src="/static/gg_ico.png" mode=""></image>
					</view>
					<view class="info">
						<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item>
								<view class="swiper-item" >
									<text class="one-omit">何*** 理刚刚通过推广赚了￥25.00元，商品男装休闲装购买</text>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<text class="one-omit">张*** 理刚刚通过推广赚了￥99.00元，商品Mac book pro 15寸购买</text>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<text class="one-omit">郑*** 理刚刚通过推广赚了￥88.00元，商品华为meat30 pro购买</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<!--天天有钱-->
			<!-- <view class="pa-10 bg-white mt-10 zaiui-user-info-money-box">
				<view class="flex col-2 money-col">
					<view class="money-item">
						<view class="money-item-view">
							<view class="cu-avatar lg" style="background-image:url(/static/images/my/1.png);"/>
							<view class="money-content">
								<view class="text-black text-cut">边逛边赚钱</view>
								<view class="text-gray text-sm text-cut">最高提现20元</view>
							</view>
						</view>
					</view>
					<view class="money-item">
						<view class="money-item-view">
							<view class="cu-avatar lg" style="background-image:url(/static/images/my/2.png);"/>
							<view class="money-content">
								<view class="text-black text-cut">发条借钱</view>
								<view class="text-gray text-sm text-cut">最高额度50000</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<view class="mt-50">
				<tm-sheet :shadow="24">
					<view class="flex flex-between">
						<view class="text-size-s text-weight-b">热门课程</view>
						<view class="text-size-s text-weight-b text-green">更多</view>
					</view>
				
					<view class="ma-32 flex-between flex-wrap">
						<view style="width: 47%;" :key="index" v-for="(item, index) in ['card', 'cardActions']"><tm-skeleton :model="item"></tm-skeleton></view>
					</view>
				</tm-sheet>
			</view>
		</view>
		<tm-bottomnavigation :list="$tm.vx.state().test.tabarlist"
						icon-color-grey="grey" icon-color="green"	></tm-bottomnavigation>
		
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			keyword: '',
			top: 60,
			flootBootm: 0,
			time: '2021/11/5',
			ver: '1.2.24',
			sys: null,
			list: ['https://picsum.photos/500?jv=3', 'https://picsum.photos/500?jv=34', 'https://picsum.photos/500?jv=5'],
			list2: [
				{ icon: 'https://chat.gxit.org/addons/swa_education/h5/static/img/explore_lesson.21cb4b42.png', text: '全部课程', color: 'blue', iconSize: 100 },
				{ icon: 'https://chat.gxit.org/addons/swa_education/h5/static/img/explore_special.be53e9e8.png', text: '专题专栏', iconSize: 100, color: 'red' },
				{ icon: 'https://chat.gxit.org/addons/swa_education/h5/static/img/explore_lector.38803c30.png', text: '讲师风采', color: 'green', iconSize: 100 },
				{ icon: 'https://chat.gxit.org/addons/swa_education/h5/static/img/explore_works.23464522.png', text: '作品欣赏', color: 'blue-grey', iconSize: 100 }
			]
		};
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	onLoad() {
		// #ifdef MP
		this.top = uni.upx2px(150);
		// #endif
	},
	mounted() {
		uni.showTabBar({
			animation: true
		});
	},
	methods: {
		change(e) {
			this.$tm.toast(`点击了：${e.index},数据为：${JSON.stringify(e.data)}`);
		},
		openSearch() {
			uni.navigateTo({
				url: 'search?key=' + this.keyword
			});
		},
		openUrl(url) {
			let t = this;
			uni.navigateTo({
				url: url,
				fail: e => {
					t.show = true;
				}
			});
		},
		imte() {
			this.$tm.theme.setBlack();
		}
	}
};
</script>

<style lang="scss">
page,
body {
	min-height: 100%;
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
	/* 通知 */
	.inform{
		padding: 0 30rpx;
		
		height: 40rpx;
		margin: 20rpx auto;
		border-bottom: 16rpx solid #f9f9f9;
		.inform-info{
			background-color: #FFFFFF;
			display: flex;
			padding: 10rpx 10rpx;
			height: 70rpx;
			// background-color: #f7f7f7;
			border-radius: 10rpx;
			.picture{
				width: 15%;
				height: 100%;
				image{
					width: 73rpx;
					height: 64rpx;
				}
			}
			.info{
				width: 80%;
				height: 100%;
				.swiper{
					width: 100%;
					height: 100%;
					.swiper-item{
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;
						text{
							font-size: 24rpx;
							color: #848281;
						}
					}
				}
			}
		}
	}
	.zaiui-user-info-money-box {
		border-radius: 18.18rpx;
		.money-col {
			padding: 0 9.09rpx 9.09rpx;
			.money-item {
				position: relative;
				padding: 9.09rpx;
				.money-item-view {
					border: 1.81rpx solid #f3f2f3;
					border-radius: 18.18rpx;
					position: relative;
					padding: 9.09rpx;
					.cu-avatar {
						position: absolute;
						left: 9.09rpx;
					}
					.money-content {
						position: relative;
					    margin-left: 109.09rpx;
					    margin-bottom: 27.27rpx;
					    top: 12.72rpx;
					}
				}
			}
		}
	}
	/* 超出一行省略号 */
	.one-omit {
		white-space: nowrap; /*规定段落中的文本不进行换行*/
		overflow: hidden; /*内容会被修剪，并且其余内容是不可见的。*/
		text-overflow: ellipsis; /*显示省略号来代表被修剪的文本*/
	}
</style>
